<template>
    <div class="app-aside h-full el-col-3" style="position: fixed;">
        <!--logo-->
        <div class="logo">
            <img src="../assets/logo.png"/>
            <span>Vue</span>
        </div>

        <!--sidebar-->
        <el-menu :uniqueOpened="unique" :defaultOpeneds="openeds" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
            <el-submenu index="1">
                <template slot="title"><i class="el-icon-message"></i>产品服务</template>
                <router-link :to="{ name: 'mysql'}" active-class="active"><el-menu-item index="1-1">Mysql</el-menu-item></router-link>
                <router-link :to="{ name: 'redis'}" active-class="active"><el-menu-item index="1-2">Redis</el-menu-item></router-link>
                <el-menu-item index="1-3">Mongodb</el-menu-item>
                <el-menu-item index="1-4">OSS</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title"><i class="el-icon-menu"></i>用户中心</template>
                <el-menu-item index="2-1">个人资料</el-menu-item>
                <el-menu-item index="2-2">用户协议</el-menu-item>
                <el-menu-item index="2-3">我的订单</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title"><i class="el-icon-setting"></i>设置</template>
                <el-menu-item index="3-1">安全设置</el-menu-item>
                <el-menu-item index="3-2">账号设置</el-menu-item>
            </el-submenu>
        </el-menu>

    </div>
</template>

<script>

    export default {
        data () {
            return {
                unique:true,
                openeds:["1"]
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }

</script>

<style>

    *{
        padding: 0;
        margin: 0;
    }

    .app-aside{
        background-color: #324057;
    }

    .logo{
        height: 60px;
        text-align: center;
        color: #fff;
    }

    .logo img {
        height: 60%;
    }

    .el-menu a{
        text-decoration: none;
    }

    .el-menu .active li{
        color: #20a0ff;
    }

</style>